<template>
    <b>确认订单</b>
    <br />
    <el-table :data="tableData" height="150" style="width: 100%; margin-top: 20px; margin-bottom: 20px;">
        <el-table-column prop="date" label="充值产品">
            <template #default="scope">

                <img :src="scope.row.imageUrl" width="40" alt="">
                <b>{{ scope.row.productName }}</b>
                <br />
                <b>{{ scope.row.description }}</b>
            </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" />

        <el-table-column label="数量">
            <template #default="scope">
                <el-input-number v-model="num" @change="handleChange(num, scope.row.price)" :min="1"
                    :max="scope.row.inventory" label="描述文字"></el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="小计">{{ total }}</el-table-column>
    </el-table>


    <div style="position: relative; width: 100%;"> 
        <div class="box">
            <span>实付款：<b style="color: rgb(255, 80, 0);font-size: 20px;">{{ total }}</b></span>
            <span>充值详情：<b style="color: #daa520;font-size: 16px;">{{ dercs }}</b></span>
            <span>充值账户：<b style="color: #daa520;font-size: 16px;">{{ user.usersifno.nickname }}</b></span>
            <br/>
            <el-button style="width: 200px;" @click="submitOrder()">提交订单</el-button>
        </div>
        
    </div>
</template>





<script setup>
// import { ta } from "element-plus/es/locale";
import { ref, onMounted } from "vue"
import { useRoute,useRouter } from "vue-router"
import *as api from "../../../api/vip"
import { useUser } from "../../../store/uses.js"


let route = useRoute()

let router = useRouter()

let tableData = ref()

let user = useUser()

let { id } = route.query

let num = ref(1)

let total = ref("0.01")

let dercs = ref("")

let handleChange = (num, count) => {
    return total.value = (num * count).toFixed(2)
}
let getlits = async () => {

    try {
        let res = await api.getVipProducts(id)
        tableData.value = res.data.data
        dercs.value = res.data.data[0].description
        console.log(res);
    } catch (error) {
        console.log(error);
    }


}


let submitOrder = async ()=>{

    try {
        let res = await api.addOrder(id,num.value)
        console.log(res.data.order_id);
        router.push({
            path:'/statice/pay',
            query:{
                id:res.data.order_id
            }
        })
    } catch (error) {
        
    }
}

onMounted(() => {
    getlits()
})



</script>

<style scoped>
.box {
    width: 500px;
    height: 100px;
    border: 1px red dashed;
    display: flex;
    flex-direction: column;
    position:absolute;
    right: 0;
    }
</style>